import React, { Component } from 'react'
import { connect } from 'react-redux'
import './index.css' // 样式引入
import { sendMsg ,readMsg } from '../../redux/actions'

import { NavBar, List, InputItem ,Grid ,Icon } from 'antd-mobile'
import QueueAnim from 'rc-queue-anim'; // 引入进出场动效组件

const Item = List.Item

// 聊天路由页面容器组件
class Chat extends Component {
  state = {
    content: '', // 双向绑定国的输入内容
    isShow: false, // 是否显示表情列表 默认false
    emojis: []
  }
  // 生命周期钩子函数
  // 组件将要渲染之前的生命周期函数
  componentWillMount(){
    // 初始化emoji表情列表数据
    const emojis = ['😀', '😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣','😀'
      ,'😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣'
      ,'😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣'
    ]
    this.emojis = emojis.map(emoji => ({text: emoji}))
 
  }
  // 页面第一次加载之后
  componentDidMount(){
  //  初始化页面后，将滚动条滚到到最下面
  //  setInterval(() => {
  //    window.scrollTo(0,document.body.scrollHeight)
  //  })
    //  进入聊天页面就发送ajax将消息更新为已读
    let from = this.props.match.params.userid // 对方: 也即是接收消息的用户的id
    let to = this.props.user.data.userid
    this.props.readMsg({from,to})
  }
  // 页面数据更新之后的
  componentDidUpdate(){
    console.log(1)
    // 页面数据已更新就将滚动条拉到最底部
    window.scrollTo(0,document.body.scrollHeight)
    let {unReadMsgCount} = this.props.chat
    // 在聊天过程中就需要将消息变为已读 但是componentDidUpdate是高频事件 所以对 unReadMsgCount未读数量进行判断 如果有未读消息才发送ajax更新未读消息为 已读
    if (unReadMsgCount) {
      let from = this.props.match.params.userid // 对方: 也即是接收消息的用户的id
      let to = this.props.user.data.userid
      // this.props.readMsg({from,to})
    }
  }
  
  render () {
    // 聊天列表只能显示 当前用户 和 选中的对方 之间的聊天信息 不能出现 第三者之间的聊天 所以需要过滤
    const {data} = this.props.user // 当前用户的信息
    const {users, chatMsg} = this.props.chat // 聊天相关信息
    let myid = data.userid    //  当前登录的用户 消息发送者
    let to = this.props.match.params.userid // 对方: 也即是接收消息的用户的id
    
    // 如果还没有获取到数据那么不显示
    if (!users[myid]) {
      return null
    } else {
      // 如果获取到数据了 那么计算 并且显示聊天列表
      // 计算出当前用户和对方用户的之间的私有的聊天id  由双方的id组成 所以过滤出现和其他人之间的聊天信息
      const chat_id = [myid, to].sort().join('_')
      // 根据chat_id过滤聊天消息列表
      const filterChaMsg = chatMsg.filter(value => value.chat_id === chat_id)
      const {emojis ,isShow}   = this.state

      return (
        <div id='chat-page'>
          <NavBar
            className={'sticky-header chatListOfHeader'}
            onLeftClick={ () =>  this.props.history.goBack()  }
            icon={ <Icon type={'left'}/>  }  >
            {/*NavBar的内部文本 显示的是聊天对象对方*/}
            {users[to].username}
          </NavBar>
          <List className={'chatList'}>
  
            <QueueAnim   ease={['easeOutQuart', 'easeInOutQuart']}>
              {filterChaMsg.map(value => {
                if (myid === value.from) {
                  //  我发给别人的消息
                  return (
                    <Item
                      key={value._id}
                      className='chat-me'
                      extra='我'
                    >
                      {value.content}
                    </Item>
                  )
                } else {
                  // 别人发给我的
                  return (
                    <Item
                      key={value._id}
                      thumb={`/images/headers/${users[to].header}.png`}
                    >
                      {value.content}
                    </Item>
                  )
                }
    
              })}
              
            </QueueAnim>
          
          </List>
           <div className={'am-tab-bar-warp'}>
             <div className='am-tab-bar'>
               <InputItem
                 ref={'inputitem'}
                 value={this.state.content}
                 placeholder="请输入"
                 onChange={(value) =>  this.setState({content: value}) }
                 extra={
                   <span>
                  <span>😉</span>
                  <span onClick={this.sendMsgHandler}>发送</span>
                </span>
                 }
               />
               <Grid
                 data={this.emojis}
                 columnNum={8}
      
                 onClick={(value) => {
                   // console.log(value)
                   this.setState({
                     content: this.state.content + value.text
                   })
                   console.log(this.state.content)
                 } }
    
               />
  
             </div>
           </div>
        </div>
      )
    }
    
  }
  
  // 发送消息方法
  sendMsgHandler = () => {
    let content = this.state.content.trim() // trim清除空白符
    // 如果没有输入那么返回
    if (!content) { return }
    // 收集要发送的内容对象
    let data = {
      from: this.props.user.data._id,  // 当前登录的用户 消息发送者
      to: this.props.match.params.userid, //  发给哪个用户 id 值可以从props.match.params 路由匹配参数中得到(点击跳转后过来的路由地址中会有 userid)
      content, // 内容
    }
    this.props.sendMsg(data)
    // 清除input的输入内容
    this.refs.inputitem.clearInput()
  }
}

export default connect(
  state => ({user: state.user, chat: state.chat, }),
  {sendMsg , readMsg},
)(Chat)

